<template>
  <div id="consult-index">
    <div slot="first" class="first">政策咨询</div>
    <b-layout
      mode="horizontal"
      placement="right"
      space="0px"
      :border="false"
      class="main"
    >
<!--      space = "466px"-->
      <div slot="first" id="consult">
        <div class="top" ref="top">
          <el-scrollbar ref="scroll" class="scroll">
            <div class="date">{{getNowTime()}}</div>
            <div class="message_box">
              <div :class="v.type==='inquiry'?'inquiry':'reply'" v-for="(v,i) in messageGather" :key="i">
                <div class="avatar" v-if="v.type === 'reply'"></div>
                <div class="message" @click="toProblemDetail(v.id, v.keywords)">
                  <div :class="v.type==='inquiry'?'arrow arrow-right':'arrow arrow-left'"></div>
                  <div>{{v.title}}</div>
                </div>
                <div class="avatar" v-if="v.type === 'inquiry'"></div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="bottom">
          <el-input
            class="text"
            type="textarea"
            placeholder="请输入内容"
            :rows="4"
            maxlength="200"
            resize="none"
            show-word-limit
            @keydown.enter.native="listen($event)"
            v-model="selfInner">
          </el-input>
          <el-button class="consult-btn" size="mini" @click="sendHandle">发送</el-button>
        </div>
      </div>
    </b-layout>
  </div>
</template>

<script>
import bLayout from '@/layouts/BinaryLayout'
export default {
  name: 'policy-consult-index',
  components: {
    bLayout
  },
  data () {
    return {
      selfInner: '',
      messageGather: [
        { type: 'reply', title: '您好，很高兴为您服务！快来输入银行、保险等法规关键词咨询我吧。' }
      ],
      search_type: null,
      timer: null,
      flag: null // 标记
    }
  },
  watch: {
    messageGather: {
      handler () {
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      },
      deep: true
    }
  },
  mounted () {
  },
  methods: {
    getNowTime () {
      let date = new Date()
      let seperator1 = '-'
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let strDate = date.getDate()
      let hours = date.getHours()
      let minutes = date.getMinutes()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (hours < 10) {
        hours = '0' + hours
      }
      if (minutes < 10) {
        minutes = '0' + minutes
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      return year + seperator1 + month + seperator1 + strDate + '   ' + hours + ':' + minutes
    },
    clickFaq (val) {
      this.messageGather.push({ title: val.name, type: 'inquiry' })
    },
    listen (event) {
      this.sendHandle() // 发送文本
      event.preventDefault() // 阻止浏览器默认换行操作
      return false
    },
    sendHandle (event) {
      if (this.selfInner === '') {
        this.$msgMnger.warn('不能发送空的消息')
        return
      }
      this.messageGather.push({ title: this.selfInner, type: 'inquiry' })
      this.getReply(this.selfInner)
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = setTimeout(() => {
        if (this.flag === 3) {
          this.messageGather.push({ title: '正在查找中，请稍后......', type: 'reply' })
        }
        clearTimeout(this.timer)
      }, 1000)
      this.selfInner = ''
    },
    /**
     *
     * @param id 如果id存在则用户点击了法规标题
     * @param keywords 如果keywords存在则用户点击了了解更多
     */
    toProblemDetail (id, keywords) {
      if (id) {
        let routeUrl = this.$router.resolve({
          path: `/policy-consult/detail/${id}`
        })
        window.open(routeUrl.href, '_blank')
        return
      }
      if (keywords) {
        let routeUrl = this.$router.resolve({
          path: `/new-law-express/list/?keywords=${keywords}&search_type=${this.search_type}`
        })
        window.open(routeUrl.href, '_blank')
      }
    },
    // 每次发送消息将滚动条置于最底部
    scrollToBottom () {
      document.getElementsByClassName('el-scrollbar__wrap')[0].scrollTo(0, document.getElementsByClassName('el-scrollbar__wrap')[0].scrollHeight)
    },
    // 获取回复法规
    getReply (val) {
      this.flag = 3
      var params = {
        keywords: val
      }
      // 获取回复的消息队列并插入到存放聊天记录的数组里，将类型标记为reply
      this.$api.consult(params).then(res => {
        this.flag = 0
        res.data.forEach(item => {
          item.type = 'reply'
        })
        if (res.search_type) {
          this.search_type = res.search_type
        }
        if (res.data.length) {
          this.messageGather.push(...res.data)
        } else {
          this.messageGather.push({ title: '对不起，没有找到您想要的内容。请输入法规关键词，如保险、银行等。', type: 'reply' })
        }
      }).catch(err => {
        console.log(err)
        this.flag = 0
        this.messageGather.push({ title: '我有点迷糊了，请重新输入关键词。', type: 'reply' })
      })
    },
    //
    toMoreProblems () {
      this.$router.push('/policy-consult/problem')
    }
  }
}
</script>

<style scoped lang="scss">

#consult-index{
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  font-size: $fs-m;
  .first{
    margin-bottom: 15px;
    color: $sedondary-text-color;
  }
  .main{
    box-sizing: border-box;
    background: $box-bg-color;
    padding: 32px;
  }
  #consult{
    height: calc(100% - 34px);
    border: 1px solid $box-border-color;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    .top{
      height: calc(100% - 133px);
      /*padding: 20px 30px;*/
      .date{
        text-align: center;
        margin-top: 20px;
        color: $sedondary-text-color;
      }
      .scroll{
        height: 100%;
        .message_box{
          padding: 12px 30px;
          .inquiry, .reply{
            clear: both;
            max-width: calc(100% - 100px);
            .message{
              max-width: 500px;
              background:rgba(243,243,243,1);
              border-radius: 6px;
              padding: 9px 12px;
              position: relative;
              float: left;
            }
            .arrow{
              content: '';
              width: 0;
              height: 0;
              border: 10px solid;
              border-color: transparent #f3f3f5;
              position: absolute;
            }
            .avatar{
              width: 34px;
              height: 34px;
            }
          }
          .inquiry{
            float: right;
            margin-bottom: 10px;
            .avatar{
              float: right;
              margin-left: 16px;
              background: url('../../../../static/policy-consult/self.png') no-repeat center;
            }
            .arrow-right{
              border-width: 9px 0 9px 10px;
              right: -8px;
              top: 18px;
              margin-top: -8px;
            }

          }
          .reply{
            float: left;
            margin-bottom: 10px;
            .avatar{
              float: left;
              background: url('../../../../static/policy-consult/system.png') no-repeat center;
              margin-right: 16px;
            }
            .message{
              float: left;
              color: $primary-color;
              text-decoration: underline;
              cursor: pointer;
            }
            .arrow-left{
              border-width: 9px 10px 9px 0;
              left: -8px;
              top: 18px;
              margin-top: -8px;
            }
          }
        }
      }
    }
    .bottom{
      height: 133px;
      border-top: 1px solid $box-border-color;
      .text{
        /*height: 100%;*/
        /*width: 100%;*/
        border: none;
      }
    }
    .consult-btn{
      float: right;
      margin-right: 10px;
    }
  }
  #problem{
    border: 1px solid #d9d9d9;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-left: none;
    height: calc(100% - 32px);
    box-sizing: border-box;
    .head{
      height: 64px;
      line-height: 64px;
      background: #faf7f8;
      padding: 0 10px;
      &:after{
        display: block;
        content: '';
        clear: both;
      }
      .leftp{
        float:left;
        display: table;
        >div{
          display: inline-block;
        }
        .icon{
          width: 24px;
          height: 24px;
          background-color: $primary-color;
          background-image: url('../../../../static/policy-consult/question.png');
          background-repeat: no-repeat;
          background-size: 14px 14px;
          background-position: center;
          vertical-align: middle;
        }
        .des{
          color: #000;
          font-weight: 600;
          margin-left: 5px;
        }
      }
      .rightp{
        float: right;
        cursor: pointer;
        >div{
          display: inline-block;
        }
        color: $primary-color;
        .icon{
          font-size: 18px;
          margin-left: 5px;
          cursor: pointer;
        }
      }
    }
    .list{
      padding-left: 15px;
      height: calc(100% - 74px);
      .list-scroll{
        height: 100%;
        width: 100%;
        box-sizing: border-box;
      }
      .item{
        height: 34px;
        border-bottom: 1px solid #d9d9d9;
        padding-top: 9px;
        box-sizing: border-box;
        cursor: pointer;
        padding-right: 15px;
        width: 435px;
        >div{
          display: inline-block;
        }
        .star{
          width: 12px;
          height: 12px;
          background: url('../../../../static/policy-consult/star.png') no-repeat center;
          background-size: 12px 12px;
          margin-right: 5px;
        }
        .text{
          text-overflow: ellipsis;
          width: 403px;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
<style lang="scss">
#consult-index{
  textarea{
    border: none;
    &:focus{
      border: none;
    }
  }
}
</style>
